/*
 * Created: 2022-08-26 13:36:12
 * Author : 涛涛涛
 */

import React, { FC, useContext } from 'react';
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { HomeContext } from '@/pages/Home/HomeContext';
import ProductImg from '@/pages/components/ProductImg/ProductImg';
export interface IProps extends ICompProps {}
SlideBanner.defaultProps = {} as Partial<IProps>;
function SlideBanner(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('SlideBanner', className);
    const { homeExhibitionState } = useContext(HomeContext);
    return (
        <RootSwiper
            className={localClassName}
            style={style}
            indicatorColor="#ffebd8"
            indicatorActiveColor="#f58620"
            // circular //不可使用循环,循环,有一个BUG,第一次,第一张图,不可用.
            indicatorDots
            autoplay>
            {homeExhibitionState.bannerList.map((product) => (
                <SwiperItem
                    className="BannerItem"
                    key={product.id}
                    onClick={() => homeExhibitionState.gotoPageDetail(product.id)}>
                    <ProductImg src={product.artwork.iconUrl}></ProductImg>
                </SwiperItem>
            ))}
        </RootSwiper>
    );
}
export default React.memo(SlideBanner as FC<IProps>);

const RootSwiper = (() => {
    const height = '400px';
    return styled(Swiper)`
        &.SlideBanner {
            height: ${height};
            .BannerItem {
                width: inherit;
                height: ${height};
            }
        }
    `;
})();
